<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 10000px;
        }
        div{
            display: inline-block;
            min-width: 100px;
            min-height: 100px;
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div style="background-color: rgba(255,0,0,0.1)">
        <div style="background-color: rgba(255,0,0,0.1)">
            <div style="background-color: rgba(255,0,0,0.1)">
                <div style="background-color: rgba(255,0,0,0.1)">
                    <div style="background-color: rgba(255,0,0,0.1)"></div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div style="background-color: rgba(255,0,0,0.1)"></div>

    <hr>

    <h1>标题1</h1>
    <h2>标题2</h2>

    <hr>
    <span style="display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;">span标签</span>

    <hr>

    <h1 style="color: brown">
        注意:后续的样式讲解代码均不符合规范，仅作演示讲解使用
    </h1>

    <h3>行内样式</h3>
    <p style="color:coral;font-size: 24px;">
        行内样式定义：增加style属性，取值：样式名:样式值;样式名:样式值;……
    </p>
    <h3>内联样式(内部样式)</h3>
    <style>
        /* css 样式注释 */
        /* 样式语法区域 */
        #pDom {
            color: brown;
            font-size: 18px;
        }
    </style>
    <style>
        #pDom {
            color: blueviolet;
        }
    </style>
    <p id="pDom">
        内联样式：在页面中定义 style 功能描述标签，划分样式构建区；<br>
        在该样式定义区域内，通过 **元素选择器** 指定标签，并定义样式 <br>
            语法 ：选择器 { 样式 }  <br>
        内联样式定义区域 style 可以同时出现多个，<br>
        样式依然由上而下进行加载，同时具有覆盖操作 <br>
        内联样式的定义位置和元素位置没有关系，样式只基于选择器选择确定元素 <br>
    </p>
    <style>
        #pDom{
            font-size: 26px;
        }
    </style>

    <h3>外联样式(外部样式)</h3>
    <link rel="stylesheet" href="./css/01.css-base.css">
    <p id="out">
        外联样式：将样式定义在专用样式文件 .css 中 <br>
        通过功能标签 link 定义文件指向地址进行样式文件的引入，实现页面效果 <br>
        外联样式的定义规则和内联样式的定义规则一致 <br>
        外联样式的引入顺序和标签的定义顺序无关，样式只是基于选择器选择确定元素的 <br>
        外联样式可以引入多个，同时具有覆盖操作
    </p>

</body>
</html>